import React, { useState } from "react";
import { initialValue, reducer } from "../CommonFunctions";

import Child from "./Child";
import ChildCount from "./ChildCount";
import ChildNum from "./ChildNum";
import MyContext from "./Context";

const MyProvider = ({ children }) => {
  const [store, dispatch] = React.useReducer(reducer, initialValue);
  return (
    <MyContext.Provider value={{ store, dispatch }}>
      {children}
    </MyContext.Provider>
  );
};

const Demo1 = () => {
  const [isExtends, setIsExtends] = useState(false);
  return (
    <MyProvider>
      <div className="ProviderContainer GreenBorder">
        <div className="SectionHeader">
          <h3 className="SectionTitle">DEMO 1</h3>
          <h3
            className={`SectionAction ${isExtends ? "" : "ArrowDown"}`}
            onClick={() => setIsExtends(!isExtends)}
          >
            {">"}
          </h3>
        </div>
        {isExtends ? (
          <>
            <ChildCount />
            <ChildNum />
            <Child />
          </>
        ) : null}
      </div>
    </MyProvider>
  );
};
export default Demo1;
